<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/shop_head.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		
		body {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			max-width: 100%;
			min-width: 1000px;
			background-image: url(img/shop/shop_body_list_head.png);
		}
		
		#product_body {
			width: 1000px;
			margin: 0px auto;
			margin-top: 10px;
			background-color: #FFFFFF;
		}
		
		#product_top {
			width: 100%;
			overflow: hidden;
		}
		
		#product_top_left {
			float: left;
			width: 350px;
		}
		
		#product_top_bigimg {
			width: 350px;
			height: 450px;
			position: relative;
			/*overflow: hidden;*/
		}
		
		#product_top_bigimg>#product_yuantu {
			width: 350px;
			height: 450px;
			overflow: hidden;
		}
		
		#product_movediv {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 200px;
			height: 200px;
			background-color: yellow;
			filter: alpha(opacity=60);
			-moz-opacity: 0.6;
			opacity: 0.6;
			display: none;
		}
		
		#product_top_bigimg>#product_yuantu>img {
			width: 100%;
		}
		
		#product_top_bigimg>#product_changeimg {
			width: 350px;
			height: 450px;
			position: absolute;
			top: 0px;
			left: 351px;
			overflow: hidden;
			border: 1px solid;
			display: none;
		}
		
		#product_top_bigimg>#product_changeimg>img {
			width: 700px;
			height: 950px;
			position: relative;
			/*display: none;*/
		}
		
		#product_top_smallimg>ul {
			margin: 10px 0px;
			overflow: hidden;
			width: 100%;
			list-style-type: none;
		}
		
		#product_top_smallimg>ul>li {
			overflow: hidden;
			float: left;
			width: 50px;
			height: 63px;
			margin-left: 16px;
		}
		
		#product_top_smallimg>ul>li>img {
			cursor: pointer;
			width: 100%;
		}
		
		#product_top_smallimg>ul>:first-child {
			border: 2px solid #E53E41;
		}
		
		#product_top_right {
			width: 630px;
			float: right;
		}
		
		#product_top_right>div {
			margin-bottom: 15px;
		}
		
		#product_top_right_name {
			margin-top: 10px;
			width: 100%;
			font-family: "微软雅黑";
		}
		
		#product_top_right_name>p {
			width: 100%;
			font-size: 20px;
			font-weight: bold;
		}
		
		#product_top_right_name>span {
			font-size: 12px;
			color: #E53E41;
		}
		
		#product_top_right_price {
			font-family: "微软雅黑";
			font-size: 13px;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background-color: #F3F3F3;
			text-indent: 10px;
		}
		
		#product_top_right_price>span {
			margin-left: 10px;
			font-size: 20px;
			font-weight: bold;
			color: #E53E41;
		}
		
		#product_top_right_map {
			font-family: "微软雅黑";
			font-size: 13px;
			text-indent: 10px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
		
		#product_top_right_map>select {
			outline: none;
			cursor: pointer;
			margin-left: 10px;
		}
		
		#product_top_right_chima {
			font-family: "微软雅黑";
			font-size: 13px;
			text-indent: 10px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
		
		#product_top_right_chima>div {
			float: left;
			height: 30px;
			line-height: 30px;
			margin-top: 10px;
		}
		
		#product_top_right_chima>div:last-child {
			margin-left: 10px;
		}
		
		#product_top_right_chima>div>div {
			text-indent: 0px;
			text-align: center;
			width: 40px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #CCCCCC;
			margin-right: 10px;
			float: left;
			cursor: pointer;
		}
		
		#product_top_right_chima>div>div:hover {
			border: 1px solid #E53E41;
		}
		
		#product_top_right_buy {
			font-family: "微软雅黑";
			font-size: 13px;
			text-indent: 10px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
		
		#product_top_right_buy>div {
			float: left;
			overflow: hidden;
		}
		
		#product_num {
			border-top: 1px solid #CCCCCC;
			border-bottom: 1px solid #CCCCCC;
			width: 50px;
			height: 40px;
			margin-left: 10px;
			margin-top: 5px;
		}
		
		#product_num>input {
			font-family: "微软雅黑";
			font-size: 15px;
			width: 30px;
			height: 40px;
			float: left;
			text-indent: 5px;
			outline: none;
			border: none;
			border-left: 1px solid #CCCCCC;
		}
		
		#product_num>div {
			cursor: pointer;
			text-indent: 0px;
			text-align: center;
			border-left: 1px solid #CCCCCC;
			border-right: 1px solid #CCCCCC;
			border-bottom: 1px solid #CCCCCC;
			width: 20px;
			height: 20px;
			line-height: 15px;
			float: left;
		}
		
		#product_buy {
			cursor: pointer;
			width: 120px;
			height: 40px;
			line-height: 40px;
			margin-top: 5px;
			margin-left: 20px;
			text-indent: 0px;
			color: white;
			font-family: "微软雅黑";
			font-size: 15px;
			font-weight: bold;
			text-align: center;
			border: 1px solid;
			background-color: #E53E41;
		}
		
		#product_smallbg {
			width: 100%;
			height: 200px;
		}
		
		#product_smallbg>img {
			width: 200px;
			float: right;
			margin-right: 20px;
		}
		
		#product_ts {
			font-family: "微软雅黑";
			font-size: 12px;
			text-indent: 10px;
			color: gray;
		}
		
		#product_bottom {
			overflow: hidden;
			width: 100%;
		}
		
		#shoplist_list_fenlei {
			float: left;
			background-color: #F9F9F9;
			width: 180px;
			border: 1px solid #CCCCCC;
			margin-top: 10px;
			border-radius: 3px;
			overflow: hidden;
		}
		
		#shoplist_list_fenlei>div {
			width: 100%;
			height: 30px;
			line-height: 30px;
			color: #FFFFFF;
			font-family: "微软雅黑";
			text-indent: 1em;
			background-color: #721F44;
		}
		
		#shoplist_list_fenlei>a {
			display: block;
			width: 100%;
			border-bottom: 1px solid #CCCCCC;
			overflow: hidden;
		}
		
		#shoplist_list_fenlei>a>img {
			border: none;
			cursor: pointer;
			margin-left: 27px;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		
		#product_bottom_right {
			width: 800px;
			float: right;
			margin-top: 10px;
		}
		
		#product_bottom_right_head {
			border-radius: 3px 3px 0px 0px;
			height: 40px;
			width: 100%;
			background-color: #DCDCDC;
			border-bottom: 1px solid #E53E41;
		}
		
		#product_bottom_right_head>div {
			border-radius: 3px 3px 0px 0px;
			color: white;
			font-family: "微软雅黑";
			font-size: 20px;
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: #E53E41;
		}
		
		#product_bottom_right_info {
			padding: 0px 30px;
			margin-top: 20px;
			width: 100%;
			font-family: "微软雅黑";
			font-size: 13px;
			border-bottom: 1px solid #CCCCCC;
		}
		
		#product_bottom_right_info>div:last-child {
			width: 100%;
			margin-top: 10px;
		}
		
		#product_bottom_right_info>div:last-child>p {
			display: block;
			width: 100%;
			overflow: hidden;
		}
		
		#product_bottom_right_info>div:last-child>p>span {
			padding-right: 60px;
			float: left;
			display: block;
			width: 33.33%;
			height: 30px;
			line-height: 30px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		
		#product_bottom_right_infoimg {
			width: 100%;
		}
		
		#product_bottom_right_infoimg>img {
			width: 100%;
			display: block;
		}
		
		#product_foot {
			margin-top: 10px;
			max-width: 100%;
			min-width: 1000px;
		}
		
		#product_foot>img {
			width: 100%;
		}
	</style>

	<body>
		<div id="shop_head">
			<div id="base_top_bg">
				<div class="base_top_navDiv">
					<div class="base_top_logo" onclick="location.href='index.html'"></div>

					<ul class="base_top_nav">
						<li class="w42" id="index_dl">登录</li>
						<li class="w40" id="index_tcdl" onclick="location.href='register.html'"></li>
						<li class="w40" onclick="location.href='shop.html'"></li>
						<li class="w56" id="base_gwc">购物车</li>
						<li></li>
						<li class="w40"></li>
						<li class="w40"></li>
						<li class="w40"></li>
					</ul>
					<div id="base_dlcg"></div>

					<img class="base_weixin" src="img/index/index_weixin1.png" />
					<img class="base_weibo" src="img/index/index_weibo1.png" />
					<img class="base_weitao" src="img/index/index_weitao1.png" />
				</div>
			</div>
			<ul id="base_leftAdd_content">
				<li>
					<a href="news.html">资讯</a>
				</li>
				<li>
					<a href="join.html">加盟</a>
				</li>
				<li>
					<a href="job.html">纳贤</a>
				</li>
				<li>
					<a href="woker.html">匠人</a>
				</li>
				<li>
					<a href="cooperation.html">合作</a>
				</li>
				<li>
					<a href="actor.html">选角</a>
				</li>
				<li>
					<a href="media.html">媒体</a>
				</li>
			</ul>
			<div id="base_leftAdd">
				<span></span>
			</div>
			<!--模拟客服开始-->
			<div id="top"></div>
			<div id="main">
				<span id="base_guanbi"></span>
				<div id="txt">花笙记客服代表</div>
				<div id="show">
					<span class="show_span">很高兴为您服务！</span>
				</div>
				<input type="text" name="text" id="text" value="" />
				<input type="button" style="cursor: pointer;" id="send" value="发送" />
			</div>
			<!--模拟客服结束-->
		</div>
		<div id="shop_nav">
			<div id="shop_nav_icon">
				<ul id="img_icon">
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
				</ul>
				<ul id="font_icon">
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div id="product_body">
			<div id="product_top">
				<div id="product_top_left">
					<div id="product_top_bigimg">
						<div id="product_yuantu">
							<img <!--src="//img13.360buyimg.com/n1/s350x449_jfs/t3730/354/2023802200/400978/998181d0/583af840N94dcfcbb.jpg!cc_350x449.jpg" --> />
							<div id="product_movediv"></div>
						</div>
						<div id="product_changeimg">
							<img <!--src="//img13.360buyimg.com/n1/s350x449_jfs/t3730/354/2023802200/400978/998181d0/583af840N94dcfcbb.jpg!cc_350x449.jpg" --> />
						</div>
					</div>
					<div id="product_top_smallimg">
						<ul>
							<li>
								<img <!--src="//img13.360buyimg.com/n1/s350x449_jfs/t3730/354/2023802200/400978/998181d0/583af840N94dcfcbb.jpg!cc_350x449.jpg" --> />
							</li>
							<li>
								<img <!--src="//img13.360buyimg.com/n1/s350x449_jfs/t3433/303/1985005722/396880/a57e67ba/583af850N3f593dcc.jpg!cc_350x449.jpg" --> />
							</li>
							<li>
								<img <!--src="//img13.360buyimg.com/n1/s350x449_jfs/t3373/112/2007819538/380915/1678419d/583af868N1362c695.jpg!cc_350x449.jpg" --> />
							</li>
							<li>
								<img <!--src="//img13.360buyimg.com/n1/s350x449_jfs/t3676/285/1971343465/366364/9331ca24/583af865Ne751f4f0.jpg!cc_350x449.jpg" --> />
							</li>
							<li>
								<img <!--src="//img13.360buyimg.com/n1/s350x449_jfs/t3568/287/2012510673/416696/3b9de3b4/583af863N3e78784d.jpg!cc_350x449.jpg" --> />
							</li>
						</ul>
					</div>
				</div>
				<div id="product_top_right">
					<div id="product_top_right_name">
						<p>
							<!--花笙记民族复古中国风新版防水宽松唐装冬季新品 女款 黑色-->
						</p>
						<span>高品质 中国风 原创源</span>
					</div>
					<div id="product_top_right_price">
						银&nbsp;&nbsp;&nbsp;两<span><!--￥1099.00--></span>
					</div>
					<div id="product_top_right_map">
						配送至
						<select id="sheng">
							<option>请选择</option>
						</select>省
						<select id="shi">
							<option>请选择</option>
						</select>市
						<select id="qu">
							<option>请选择</option>
						</select>区
					</div>
					<div id="product_top_right_chima">
						<div>尺&nbsp;&nbsp;&nbsp;码</div>
						<div>
							<div>小(S)</div>
							<div>中(M)</div>
							<div>大(L)</div>
						</div>
					</div>
					<div id="product_top_right_buy">
						<div>数&nbsp;&nbsp;&nbsp;量</div>
						<div id="product_num">
							<input id="product_num_text" type="text" value="1" />
							<div id="product_num_jia">+</div>
							<div id="product_num_jian">-</div>
						</div>
						<div id="product_buy">
							加入购物车
						</div>
					</div>
					<div id="product_ts">
						温馨提示·支持7天无理由退货
					</div>
					<div id="product_smallbg">
						<img src="img/product/product_top_bg.png" />
					</div>
				</div>
			</div>
			<div id="product_bottom">
				<div id="shoplist_list_fenlei">
					<div>宝贝分类</div>
					<a><img src="//gdp.alicdn.com/imgextra/i1/608273487/TB2RZnasXXXXXbgXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a><img src="//gdp.alicdn.com/imgextra/i2/608273487/TB2VXy9sXXXXXbMXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a><img src="//gdp.alicdn.com/imgextra/i2/608273487/TB2TRzPsXXXXXX2XXXXXXXXXXXX_!!608273487.jpg" /></a>
					<a><img src="//gdp.alicdn.com/imgextra/i4/608273487/TB2S5fqsXXXXXcZXXXXXXXXXXXX_!!608273487.jpg" /></a>
					<a><img src="//gdp.alicdn.com/imgextra/i3/608273487/TB2ebORsXXXXXXeXFXXXXXXXXXX_!!608273487.jpg" /></a>
					<a><img src="//gdp.alicdn.com/imgextra/i4/608273487/TB2bvYosXXXXXXbXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a><img src="//gdp.alicdn.com/imgextra/i2/608273487/TB2TZC_sXXXXXbwXpXXXXXXXXXX_!!608273487.jpg" /></a>
					<a><img src="//gdp.alicdn.com/imgextra/i1/608273487/TB27oS.sXXXXXbXXpXXXXXXXXXX_!!608273487.jpg" /></a>
				</div>
				<div id="product_bottom_right">
					<div id="product_bottom_right_head">
						<div>商品介绍</div>
					</div>
					<div id="product_bottom_right_info">
						<div id="">
							品牌： 花笙记（HUSENJI）
						</div>
						<div id="">
							<p><span>商品名称：花笙记民族复古中国风新版防水宽松唐装冬季新品 女款 黑色 细(XS)</span><span>款式：唐装</span><span>上市时间：2016冬季</span></p>
							<p><span>商品编号：11037638964</span><span>厚度：适中</span><span>开衩：开衩唐装</span></p>
						</div>
					</div>
					<div id="product_bottom_right_infoimg">
						<!--<img src="img/product/product_info1.jpg" />
						<img src="img/product/product_info2.jpg" />
						<img src="img/product/product_info3.jpg" />
						<img src="img/product/product_info4.jpg" />
						<img src="img/product/product_info5.jpg" />
						<img src="img/product/product_info6.jpg" />
						<img src="img/product/product_info7.jpg" />-->
					</div>
				</div>
			</div>
		</div>
		<div id="product_foot">
			<img src="//gdp.alicdn.com/imgextra/i1/608273487/TB2P_t7bFXXXXX4XpXXXXXXXXXX_!!608273487.jpg" />
		</div>
	</body>
	<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/shop_head.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/citylist.js" type="text/javascript" charset="utf-8"></script>
	<script src="//cdn1.lncld.net/static/js/2.1.2/av-min.js"></script>
	<script>
		$("#product_top_smallimg>ul>li").each(function() {
			$(this).mouseover(function() {
				for(var i = 0; i < $("#product_top_smallimg>ul>li").length; i++) {
					$("#product_top_smallimg>ul>li").eq(i).css("border", "none");
				}
				$(this).css("border", "2px solid #E53E41");
				var smallimg = $(this).children().attr("src");
				$("#product_top_bigimg>#product_yuantu>img").attr("src", "" + smallimg + "");
				$("#product_top_bigimg>#product_changeimg>img").attr("src", "" + smallimg + "");
			})
		})
		$("#product_top_right_chima :last-child>div").each(function() {
			$(this).click(function() {
				for(var i = 0; i < $("#product_top_right_chima :last-child>div").length; i++) {
					$("#product_top_right_chima :last-child>div").eq(i).css("border", "1px solid #cccccc");
				}
				$(this).css("border", "1px solid #E53E41")
			})
		})
		//		<input id="product_num_text" type="text" value="1" />
		//							<div id="product_num_jia">+</div>
		//							<div id="product_num_jian">-</div>
		$("#product_num_jia").click(function() {
			var iptval = parseInt($("#product_num_text").val());
			iptval++;
			$("#product_num_text").val(iptval);
		})
		$("#product_num_jian").click(function() {
			var iptval = parseInt($("#product_num_text").val());
			if(iptval > 1) {
				iptval--;
				$("#product_num_text").val(iptval);
			}
		})
		//鼠标移动放大图片
		$("#product_yuantu").mousemove(function(event) {
			$("#product_movediv").css("display", "block");
			$("#product_changeimg").css("display", "block");
			var top = event.clientY - $(this).offset().top + $("body").scrollTop() - 100;
			var left = event.clientX - $(this).offset().left + $("body").scrollLeft() - 100;
			top < 0 ? top = 0 : top = top;
			top > 250 ? top = 250 : top = top;
			left < 0 ? left = 0 : left = left;
			left > 150 ? left = 150 : left = left;
			$("#product_movediv").css("top", "" + top + "px");
			$("#product_movediv").css("left", "" + left + "px");
			$("#product_changeimg>img").css("top", "" + (-2 * top) + "px");
			$("#product_changeimg>img").css("left", "" + (-2 * left) + "px");
		}).mouseout(function() {
			$("#product_movediv").css("display", "none");
			$("#product_changeimg").css("display", "none");
		})
		//省市区联动
		var shengdata = citylist.citylist;
		for(var i = 0; i < shengdata.length; i++) {
			$("#sheng")[0].add(new Option(shengdata[i].p));
		}
		$("#sheng").change(function() {
			$("#shi").html("");
			$("#qu").html("");
			var shengindex = $(this)[0].selectedIndex;
			if(shengindex > 0) {
				$("#shi")[0].add(new Option("请选择"));
				$("#qu")[0].add(new Option("请选择"));
				for(var i = 0; i < shengdata[shengindex - 1].c.length; i++) {
					$("#shi")[0].add(new Option(shengdata[shengindex - 1].c[i].n));
				}
			} else {
				$("#shi")[0].add(new Option("请选择"));
				$("#qu")[0].add(new Option("请选择"));
			}
		})
		$("#shi").change(function() {
			$("#qu").html("");
			var shiindex = $(this)[0].selectedIndex;
			if(shiindex > 0) {
				var index1 = $("#sheng")[0].selectedIndex;
				var index2 = $("#shi")[0].selectedIndex;
				var qu1 = shengdata[index1 - 1].c[index2 - 1];
				var qu2 = shengdata[index1 - 1].c;
				if(qu1.a) {
					for(var m in qu1.a) {
						$("#qu")[0].add(new Option(qu1.a[m].s));
					}
				} else {
					for(var l in qu2) {
						$("#qu")[0].add(new Option(qu2[l].n));
					}
				}
			} else {
				$("#qu")[0].add(new Option("请选择"));
			}
		})
		//获取id取商品详情
		function init() {
			var APP_ID = 'c4w6bVvWfh8xxcmkBE1G0gIt-gzGzoHsz';
			var APP_KEY = 'JBikg4Ksk76zcTi5BKYWvTJF';
			AV.init({
				appId: APP_ID,
				appKey: APP_KEY
			});
		}
		init();
		/*此处变量为创建购物车表做准备*/
		var cartname;
		var cartimg;
		var cartprice;

		function settab() {
			var query = new AV.Query('HSJ_product');
			query.descending('createdAt');
			var obid = getidurl("id"); //商品id
			query.get(obid).then(function(products) {
				cartname = products.attributes.title;
				cartimg = products.attributes.img1;
				cartprice = products.attributes.price;
				// 查询到商品后，在前端展示到相应的位置中。
				$("#product_top_bigimg>#product_yuantu>img").attr("src", products.attributes.img1);
				$("#product_top_bigimg>#product_changeimg>img").attr("src", products.attributes.img1);
				$("#product_top_smallimg>ul>li:eq(0)>img").attr("src", products.attributes.img1);
				$("#product_top_smallimg>ul>li:eq(1)>img").attr("src", products.attributes.img2);
				$("#product_top_smallimg>ul>li:eq(2)>img").attr("src", products.attributes.img3);
				$("#product_top_smallimg>ul>li:eq(3)>img").attr("src", products.attributes.img4);
				$("#product_top_smallimg>ul>li:eq(4)>img").attr("src", products.attributes.img5);
				$("#product_top_right_name>p").html(products.attributes.title);
				$("#product_top_right_price>span").html("￥" + products.attributes.price + ".00");
				$("#product_bottom_right_infoimg").html(products.attributes.description);
			}).catch(function(error) {
				console.log(JSON.stringify(error));
			});

		}
		settab();

		function getidurl(name) {
			var myurl = location.search;
			var start = myurl.indexOf(name + "=");
			if(start != -1) {
				start = start + name.length + 1;
				var end = myurl.indexOf("&", start);
				if(end == -1) {
					end = myurl.length;
				}
				return unescape(myurl.substring(start, end));
			}
		}
		$("#product_buy").click(function() {
			if(AV.User.current() == null) {
				location.href = "login.html?RetUrl=" + encodeURI(location.href);
			} else {
				var cartnum = $("#product_num_text").val();
				var currentUser = AV.User.current().attributes.username;
				var query = new AV.Query('HSJ_cart');
				query.descending('createdAt');
				var cartid = getidurl("id"); //商品id
				query.contains('cartid', '' + cartid + '');
				query.find().then(function(products) {
					//购物车表有没有，没有创建，有更新
					if(products == "") {
						var Product = AV.Object.extend('HSJ_cart');
						var product = new Product();
						product.set('cartname', cartname);
						product.set('cartprice', cartprice);
						product.set('cartimg', cartimg);
						product.set('cartnum', cartnum);
						product.set('cartid', cartid);
						product.set('owner', currentUser);
						product.save().then(function() {
							//  发布成功
							//bug用户名必须为英文！！！否则url不转义会出错
							location.href = "cart.html?User=" + zhuanyi(currentUser);
						}, function(error) {
							alert("添加失败");
							alert(JSON.stringify(error));
						});
					} else {
						var newcartnum = (cartnum * 1 + (products[0].attributes.cartnum) * 1);
						var todo = AV.Object.createWithoutData('HSJ_cart', ''+products[0].id+'');
						// 修改属性
						todo.set('cartnum', ''+newcartnum+'');
						// 保存到云端
						todo.save().then(function() {
							//  发布成功
							//bug用户名必须为英文！！！否则url不转义会出错
							location.href = "cart.html?User=" + zhuanyi(currentUser);
						}, function(error) {
							alert("添加失败");
							alert(JSON.stringify(error));
						});
					}
				}, function(error) {
					// 异常处理
					console.error(error);
				});
				//				
			}

		})

		function zhuanyi(name) {
			return encodeURI(name);
		}
		//url里?后面内容需转义,宝贝分类跳转
		function geturl() {
			var index = location.pathname.lastIndexOf('/');
			var url = location.pathname.substr(index + 1) + location.search;
			return escape(url);
		}
		$("#shoplist_list_fenlei>a").eq(0).attr("href", "shoplist.html?leibie=" + seturl_ch('新款') + "");
		$("#shoplist_list_fenlei>a").eq(1).attr("href", "shoplist.html?leibie=" + seturl_ch('热卖') + "");
		$("#shoplist_list_fenlei>a").eq(2).attr("href", "shoplist.html?leibie=" + seturl_ch('经典') + "");
		$("#shoplist_list_fenlei>a").eq(3).attr("href", "shoplist.html?leibie=" + seturl_ch('唐装') + "");
		$("#shoplist_list_fenlei>a").eq(4).attr("href", "shoplist.html?leibie=" + seturl_ch('汉服') + "");
		$("#shoplist_list_fenlei>a").eq(5).attr("href", "shoplist.html?leibie=" + seturl_ch('锦衣') + "");
		$("#shoplist_list_fenlei>a").eq(6).attr("href", "shoplist.html?leibie=" + seturl_ch('绝版') + "");
		$("#shoplist_list_fenlei>a").eq(7).attr("href", "shoplist.html?leibie=" + seturl_ch('必备') + "");

		function seturl_ch(url) {
			return encodeURI(url);
		}
	</script>

</html>